<template>
  <div class="hello">
    <button @click="playsound">播放声音</button>
    <button @click="playmic">开始录音</button>
    <button @click="stopall">停止</button>
    <router-link :to="{name: 'demo'}"> to demo</router-link>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    mounted() {


      this.$p5Audio.start(sketch=> {
          sketch.draw = ()=> {
            this.$p5Audio.do(json=> {
              console.log(json)
            })
          }
          this.sketch = sketch
          this.$p5Audio.load('/static/whn.mp3').then(sound=>this.sound=sound)
          this.$p5Audio.mic().then(mic=>this.mic=mic)

      })


    },
    methods: {
      stopall() {
        if(this.sound) {
          this.sound.stop()
        }
        if(this.mic) {
          this.mic.stop()
        }
      },
      playsound() {
        this.sound.play(()=> {
          console.log("结束")
        })
      },
      playmic() {
        this.mic.play()
      }
    },
    data () {
      return {

      }
    }
  }
</script>
